<template>
  <div>
    <div class="header">
    <HeaderTop/>
    <Breadcrumb :info="info"/>
    </div>
    <div class="main">
      <el-row>
        <el-col :span="6" :offset="2">
          <img src="../../../../static/images/shop/login-png.png" alt="" />
        </el-col>
        <el-col :span="8" :offset="4">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item>
              <p class="title">用户注册</p>
            </el-form-item>
            <el-form-item prop="phone">
              <el-col :span="17"
                ><el-input
                  v-model="ruleForm.phone"
                  placeholder="输入手机号"
                ></el-input
              ></el-col>
              <el-col :span="4"
                ><el-button icon="el-icon-mobile-phone" @click="codecheck('ruleForm')">发送</el-button>
              </el-col>
            </el-form-item>
            <el-form-item prop="code">
              <el-input
                v-model="ruleForm.code"
                placeholder="输入手机号验证码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input
                placeholder="新密码"
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input
                placeholder="确认密码"
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item class="form-bottom">
              <el-button
                class="form-btn"
                type="primary"
                @click="submitForm('ruleForm')"
                >立即注册</el-button
              >
            </el-form-item>
            <el-form-item>
              <div class="text">
                <span>立即登录</span>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import HeaderTop from '../../HeaderTop/HeaderTop.vue';
export default {
  components: { HeaderTop },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if(!/^1[0-9]{10}$/.test(value)){
        callback(new Error("请输入正确的手机号"));
      }else{
          callback()
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      info:{
          title:'用户注册',
          label:['首页','用户注册']
      },
      ruleForm: {
        phone: "",
        code: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        code:[{required:true,message:'请输入验证码',taigger:'blur'}],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message('注册成功')
                } else {
                    this.$message({
                        type:'error',
                        meessage:'注册失败'
                    })
                return false;
                }
            });
        },
        codecheck(formName){
            let { phone } = this.ruleForm
            if(phone.length === 11){
                this.$message('验证码发送成功!')
                this.ruleForm.code = '123'
            }
        }
    }
};
</script>

<style scoped>
.el-form {
  margin-bottom: 0px;
}

.header-top {
  padding: 0 60px;
  overflow: hidden;
  height: 101px;
}

.img {
  width: 200px;
  height: 50px;
  line-height: 101px;
}
.input {
  width: 500px;
}
.form {
  padding: 30px 10px 0 10px;
}


.main {
  margin-top: 40px;
}
.title {
  margin: 0px;
  font-size: 16px;
  color: black;
}
.form-bottom {
  margin-bottom: 0px;
}
.form-btn {
  width: 100%;
}
.text span {
  color: #f07057;
}
.text span:hover {
  color: black;
}
</style>